<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>发布文章</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/main.css">

    <!--视频播放器-->
    <link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>


    <script src="/js/jquery-2.1.4.min.js"></script>

    <link type="text/css" rel="stylesheet" href="/plugins/video/css/stream-v1.css">
    <script src="/plugins/video/js/stream-v1.js"></script>


    <link rel="stylesheet" href="/css/commonNav.css">
    <style>
        .lay-blog .container {
            width: 960px;
            margin: 0 auto;
        }

        #relateArticles li {
            font-size: 14px;
        }
    </style>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style type="text/css">
        .downpanel .layui-select-title span {
            line-height: 38px;
        }

        /*继承父类颜色*/
        .downpanel dl dd:hover {
            background-color: inherit;
        }
    </style>
    <style type="text/css">
        body {
            height: 100%;
            width: 100%;
            background-size: cover;
            margin: 0 auto;
        }

        td {
            font-size: 12px !important;
        }

        .layui-form-checkbox span {
            height: 30px;
        }

        .layui-field-title {
            border-top: 1px solid white;
        }

        table {
            width: 100% !important;
        }

        .title-left {
            padding: 15px 0 20px 20px;
            background-color: white;
            /*padding: 40px 0px 30px;*/
            margin-bottom: 10px;
            border-radius: 5px;
            margin-right: 10px;
        }

        #article_form {
            /*margin-left: -40px;*/

        }

        /*.title-label{*/
        /*width:50px;*/
        /*}*/
        /* 左右布局 */
        .my-label {
            /*width: 100px;*/
        }

        /*.main {*/
            /*display: flex;*/
            /*flex-direction: row;*/
        /*}*/

        /*.right-content {*/
            /*width: 100%;*/
            /*margin-left: 10px;*/
            /*padding-left: 20px;*/
            /*display: flex;*/
            /*display: flex;*/
            /*flex-direction: column;*/
        /*}*/

        /*ul.left-nav li {*/
            /*border-left-color: #23b8ff;*/
        /*}*/

        /*ul.left-nav li:hover {*/
            /*background-color: rgba(100, 100, 100, 0.3) !important;*/
        /*}*/

        /*ul.left-nav li.active {*/
            /*background-color: #eaeaea;*/
            /*border-left: 5px solid;*/
            /*border-left-color: #23b8ff;*/
        /*}*/

        /*ul.left-nav a {*/
            /*color: black !important;*/
        /*}*/

        /*ul.left-nav a:hover {*/
            /*color: #23b8ff !important;*/
        /*}*/

        /*.icon-cursor:hover {*/
            /*cursor: pointer;*/
        /*}*/

        /* 表单样式 */
        .outline-form {
            background-color: white;
            padding: 25px 100px;
            margin-bottom: 30px;
        }

    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>

<div class="container-wrap" style="">
    <div class="container" style="width: 1080px;">
        <div class="main">
            <div class="left-nav left-container">
                <ul class="layui-nav layui-nav-tree left-nav" style="background-color: white;color: black;"
                    lay-filter="test">
                    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                    <li class="layui-nav-item">
                        <a href="/teacher/article/add.html">图文发布</a>
                    </li>
                    <li class="layui-nav-item active">
                        <a href="javascript:;">视频发布</a>
                    </li>
                </ul>

            </div>
            <div class="right-content">
                <form class="layui-form" lay-filter="article_form" id="article_form" style="font-size: 16px;">
                    <div class="outline-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label my-label" style="">选择年级</label>
                            <div class="layui-input-block" id="grade">
                                <select name="grade" lay-verify="required" lay-filter="grade">
                                    <option value="" class="expected"></option>
                                    <option v-for="g in grade" :value="g.id">{{g.name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form" lay-filter="course">
                            <label class="layui-form-label my-label">选择课程</label>
                            <div class="layui-input-block" id="course">
                                <select name="course.id" lay-verify="required" lay-search lay-filter="course">
                                    <option value="" class="expected"></option>
                                    <!--<option v-for="c in courses" :value="c.id">{{c.name}}</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form" lay-filter="outline">
                            <label class="layui-form-label my-label">选择大纲</label>
                            <div class="layui-input-block" id="outline">
                                <select name="outlineId" lay-verify="required" lay-filter="outline">
                                    <option value="" class="expected"></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-lable my-label">选择知识点</label>
                            <div class="layui-input-block">
                                <div style="margin-top: -20px;margin-bottom: 18px">{{selectedOutlineDetail.name}}
                                    <span><i class="layui-icon" id="outlineDetailLoad"
                                             style="font-size: 28px; display: none;">&#xe63d;</i></span>
                                </div>
                                <ul id="outline_tree"></ul>
                            </div>

                        </div>
                        <div class="layui-form-item" style="font-size: 16px;">
                            <label class="layui-form-label my-label">标题</label>
                            <div class="layui-input-block" style="">
                                <input type="text" name="title" id="title" required lay-verify="required"
                                       placeholder="请输入标题"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>
                    <div style="background-color: white">
                        <div id="video" style="padding: 20px;">
                            <div id="video_info" style="padding-left: 20px;">

                            </div>
                            <div id="i_select_files" style="width:300px; margin: 20px;">
                            </div>
                            <div id="file_info"></div>

                            <div id="i_stream_files_queue">
                            </div>
                            <button onclick="javascript:_t.upload();">开始上传</button>
                            |
                            <button onclick="javascript:_t.stop();">停止上传</button>
                            |
                            <button onclick="javascript:_t.cancel();">取消</button>
                        </div>
                        <div id="video_caption" style="padding: 20px 0 20px 10px;">
                            <button type="button" class="layui-btn" id="caption">
                                <i class="layui-icon">&#xe67c;</i>上传字幕
                            </button>
                            <span></span>
                        </div>
                        <div class="cover_img" style="padding: 20px 0 20px 10px;">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" id="test1">上传图片</button>
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" style="max-width: 80%;" id="demo1">
                                    <p id="demoText"></p>
                                </div>
                            </div>
                        </div>

                        <div style="padding-left: 20px;">
                            <button class="layui-btn layui-btn-primary" onclick="preview()" type="button">预览</button>
                            <div style="display: none; margin: 20px auto;" id="video_container">

                            </div>
                        </div>
                        <div style="padding: 20px;">
                            <button class="layui-btn" lay-submit lay-filter="article_form">确认提交</button>
                        </div>

                    </div>

                </form>
            </div>
            <div style="clear: both;"> </div>
        </div>


    </div>
</div>
<div th:include="/teacher/templates::footer"></div>
</body>
<script src="/vue/vue.js"></script>
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>

<script src="/js/teacher/article/addVideo.js"></script>

<script>
    const saveVideoApi = api.saveVideo;
    const videoPreviewApi = api.videoPreview;

    window.HELP_IMPROVE_VIDEOJS = false;


    // 从session中取出视频、字幕上传信息
    (function init() {
        $.ajax({
            url: '/api/video/init',
            type: 'get',
            success: (res) => {
                if (res.data != null) {
                    if (res.data.videoOriginalName != "") {
                        $('#video_info').html(`<i class="layui-icon" style="font-size: 18px;">&#xe621;</i>` + res.data.videoOriginalName);
                        $('#i_select_files').html("重新上传");
                    }
                    if (res.data.captionOriginalName != "") {
                        $('#video_caption>span').html(res.data.captionOriginalName)
                    }
                }

            }
        })
    })()


    var config = {
        multipleFiles: false,
        // formed: true, /** 强制form表单的方式传输(此种方式不支持断点续传) */
        browseFileId: "i_select_files", /** 选择文件的ID, 默认: i_select_files */
        browseFileBtn: "<div>请选择视频文件</div>", /** 显示选择文件的样式, 默认: `<div>请选择文件</div>` */
        dragAndDropArea: "i_select_files", /** 拖拽上传区域，Id（字符类型"i_select_files"）或者DOM对象, 默认: `i_select_files` */
        dragAndDropTips: "<span>把文件拖拽到这里</span>", /** 拖拽提示, 默认: `<span>把文件(文件夹)拖拽到这里</span>` */
        filesQueueId: "i_stream_files_queue", /** 文件上传容器的ID, 默认: i_stream_files_queue */
        filesQueueHeight: 200, /** 文件上传容器的高度（px）, 默认: 450 */
        multipleFiles: true,
        tokenURL: "/api/queryToken",
        // tokenURL: "http://localhost:8088/api/queryToken",
        uploadURL: "/api/uploadFile",
        // uploadURL: "http://localhost:8088/api/uploadFile",
        maxSize: 2 * 1024 * 1024 * 1024, /** 2G */
        messagerId: "i_stream_message_container", /** 消息显示容器的ID, 默认: i_stream_message_container */
        onRepeatedFile: function (file) {
            console.log("文件： " + file.name
                + " 大小：" + file.size + "已存在于上传队列中");
            return false;
        },
        onSelect: function (list) {
            // 如果session有为保存的文件，需要删除
            // $.ajax({url: '/api/video/clearFile', type: 'post'})
        },
        onComplete: (file) => {
            console.log(file)
            var inner = `<span>${file.name}  |  ${file.formatSize}</span>`;
            $('#i_select_files').html("重新上传");
            // $('#file_info').html(inner);
        }
    };
    var _t = new Stream(config);

    function sentiment(id, url, ext) {
        $.ajax({
            url: apiBase + '/renderCaption',
            type: 'POST',
            // dataType:'jsonp',
            data: {id: id, url, ext},
            success: res => {
                // 保存到数据库
            }
        });
    }

    layui.use(['form', 'upload'], function (form, upload) {
        var form = layui.form, upload = layui.upload;
        // 添加视频文章
        form.on('submit(article_form)', function (data) {
            layer.confirm('是否要上传?', {icon: 3, title: '提示'}, async function (index) {
                data = {
                    title: data.field.title, 'outlineId': data.field.outlineId,
                        'detailNum': ArticleFormVue.selectedOutlineDetail.num
                };
                var res = await saveVideoApi(data);
                if (res.code == 0) {
                    layer.msg("上传成功", {icon: 1});
                    window.location.href='/teacher/video/detail.html?id='+res.data.id;
                    // 情感分析,调用服务并保存到数据
                    sentiment(res.data.id, base + "/upload/video/" + res.data.captionFilename, res.data.captionExt)
                } else {
                    layer.msg(res.msg, {icon: 2})
                }
            });

            return false;
        });
        var captionFile = upload.render({
            elem: '#caption',
            url: '/api/video/captionFile',
            exts: 'srt|vtt',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    console.log(file); //得到文件对象
                });
            },
            done: function (res) {
                if (res.code == 0) {
                    layer.msg("上传成功", {icon: 1});
                    $('#video_caption>span').html(res.data.orgFilename)
                    console.log(res)

                } else {
                    layer.msg("请先上传视频文件", {icon: 2})
                }
            }
        });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '/api/video/cover'
            , size: 1024 * 10
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    })


     async function preview() {
        // 从后台获取刚上传的视频文件路径
        // $.fetch("/api/video/preview");
        var res = await videoPreviewApi();
        console.log(res)
        if (res.status == 0) {
            layer.msg('请先上传视频和字幕文件！', {icon: 2});
        } else {
            var video = `<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
                                       style="width: 90%; "
                                       poster="/upload/video/1.png">
                                    <source id="video_source" src="${res.data.videoPath}" type="video/mp4"/>
                                    <track id="track_source" src="${res.data.captionPath}" srclang="zh-cn" label="我的字幕" kind="caption" default>
                                </video>`;
            if (typeof player != 'undefined') {
                player.dispose()
            }
            $('#video_container').html(video)
            player = videojs('example_video_1', {
                muted: true,
                controls: true / false,
                height: 300,
                width: 300,
                loop: true,
                // 更多配置.....
            });
            $('#video_container').show();
        }

    }

</script>
</html>